<template>
  <div id="index" class="zbox pr">
    <headTop>
      <div slot='logo' class="select_input">
        <img src="../../images/select_img.png" @click="search(search_name)"/>
        <input type="text" name="" id="" value="" v-model="search_name" placeholder="搜索：宝马X5 高配版" />
      </div>
    </headTop>
    <div class="banner "><carrousel :banners="result.banners"/></div>
    <div class="zindex_cont1">
      <ul class="clearFloat">
        <li class="li1 clearFloat">
          <router-link :to="{path: '/car/list'}">
            <div class="ig"><img src="../../images/nav_car.png" /></div>
            <div class="fon"><h3>海量车源</h3></div>
          </router-link>
        </li>
        <li class="clearFloat">
          <router-link :to="{path: '/custom'}">
            <div class="ig"><img src="../../images/nav_dz.png" /></div>
            <div class="fon"><h3>我要定制</h3></div>
          </router-link>
        </li>
        <li class="li1 clearFloat">
          <router-link :to="{path: '/fincance/list'}">
            <div class="ig"><img src="../../images/nav_money.png" /></div>
            <div class="fon"><h3>恒天金融</h3></div>
          </router-link>
        </li>
        <li class="clearFloat">
          <router-link :to="{path: '/cloud'}">
            <div class="ig"><img src="../../images/nav_service.png" /></div>
            <div class="fon"><h3>恒天云服务</h3></div>
          </router-link>
        </li>
      </ul>
    </div>
    <div class="msg_remind">
      <div class="line"></div>
      <span>最新消息</span>
      <div class="scrollDiv" id="s2">
        <ul>
          <li><a href="">好车别错过！原来好的车源都在这里！！！猛戳这里！</a></li>
          <li><a href="">好车别错过！好的车源都在这里选哒！！！</a></li>
          <li><a href="">好车别错过！原来好的车源都在这里！！！猛戳这里！</a></li>
          <li><a href="">好车别错过！好的车源都在这里选哒！！！猛戳这里！</a></li>
          <li><a href="">好车别错过！原来好的车源都在这里！！！</a></li>
          <li><a href="">好车别错过！好的车源都在这里选哒！！！猛戳这里！</a></li>
          <li><a href="">好车别错过！原来好的车源都在这里！！！</a></li>
          <li><a href="">好车别错过！好的车源都在这里选哒！！！猛戳这里！</a></li>
        </ul>
      </div>
    </div>
    <!-- 热销进口车 开始 -->
    <div class="hot_content">
      <div class="title"><h3>热销进口车</h3><a href="">详情&gt;</a></div>
      <ul>
        <li  :class="[index==0?'operate_item1':'operate_item1 operate_item2']" v-for="(item, index) in result.hotProducts" :key="index">
          <router-link :to="{path: '/car/detail/'+item.id}">
            <div class="operate_pic"><img :src="item.img" alt="选你所爱" title="选你所爱"></div>
            <div class="operate_text"><p>{{item.title}}</p><span>{{item.detail}}</span><i>￥{{item.price}}万</i></div>
          </router-link>
        </li>
      </ul>
    </div>
    <!-- 热销进口车 结束 -->
    <!-- 最新上市 开始 -->
    <div class="hot_content new_content">
      <div class="title"><h3>最新上市</h3><a href="">详情&gt;</a></div>
      <ul>
        <li class="operate_item1" v-for="(item, index) in result.newProducts" :key="index">
          <router-link :to="{path: '/car/detail/'+item.id}">
            <div class="operate_pic"><img :src="item.img" alt="选你所爱" title="选你所爱"></div>
            <div class="operate_text"><p>{{item.title}}</p><span>{{item.detail}}</span><i>￥{{item.price}}万</i></div>
          </router-link>
        </li>
      </ul>
    </div>
    <!-- 最新上市 结束 -->
    <!-- 全球采购 开始 -->
    <div class="hot_content global_content">
      <div class="title"><h3>全球采购</h3><a href="">详情&gt;</a></div>
      <ul>
        <li :class="[index==0?'operate_item1':'operate_item1 operate_item2']"  v-for="(item, index) in result.buyProducts" :key="index">
        <router-link :to="{path: '/car/detail/'+item.id}">
            <div class="operate_pic"><img :src="item.img" alt="选你所爱" title="选你所爱"></div>
            <div class="operate_text"><p>{{item.title}}</p><span>{{item.detail}}</span><i>￥{{item.price}}万</i></div>
        </router-link>
        </li>
      </ul>
    </div>

    <foot></foot>
  </div>
</template>

<script>
  import headTop from '../../components/header/head'
  import axios from 'axios'
  import foot from '../../components/footer/footGuide'
    export default {
      name: "index",
      data(){
        return {
          search_name:null,
          result:{
            id:{},conf:{},
            banners:[],
            newProducts:[],
            hotProducts:[],
            buyProducts:[],
          }
        }
      },
      components : {
        headTop,foot,
        carrousel:require('../../components/common/swiper.vue').default
      },
      created:function () {
        // axios.post('/api/pic-consumer-wx/wx/index',{
        //   code : this.$route.query.code
        // }).then(response => {
        //   /*this.code = response.data.code;*/
        //   /*document.write(response.data.result);*/
        //   this.result = response.data.result;
        //   //this.productImgs = response.data.result.productImgs;
        //   //alert(this.productImgs[0].url)
        //   console.log(this.result.banners);
        //   this.banners = this.result.banners;
        // }).catch(err => {
        //   console.log(err);
        // });

        var that = this
        axios.get('/api/pic-consumer-wx/wx/index',{
          code : this.$route.query.code
        }).then(function(res){
          that.result.banners = res.data.banners;
          that.result.newProducts = res.data.newProducts;
          that.result.hotProducts = res.data.hotProducts;
          that.result.buyProducts = res.data.buyProducts;
          //console.log(res.data)
        }).catch(function(){
          console.log('error')
        })

      },
      methods:{
        search:function (searchTxt) {
          this.$router.push({path: '/search', query: {searchTxt: searchTxt}})
        }
      }
    }
</script>

<style lang="scss"  scoped>
  @import "../../style/common";
  @import "../../style/mixin";

  .zindex_cont1{background: #fff;}
  .zindex_cont1 ul li{float: left;width: 25%;}
  .zindex_cont1 ul li a{display: block;overflow: hidden;padding: 0.25rem 0;}
  .zindex_cont1 ul li .ig{text-align: center;}
  .zindex_cont1 ul li .ig img{width: 0.9rem;height: 0.9rem;vertical-align: middle;}
  .zindex_cont1 ul li .fon h3{line-height: 100%;color: #666;font-size: 0.2rem;font-weight: normal;padding-top: 0.14rem;text-align: center;}
  .zindex_cont1 ul li .fon p{line-height: 100%;color: #9B9B9B;font-size: 0.18rem;margin-top: 0.18rem;}
  .index_nav button{font-size: 0.26rem;}

  .msg_remind{background: #fff;padding: 0.2rem;display: inline-block;padding-bottom: 0.1rem;width: 100%;}
  .msg_remind .line{border-bottom: 1px solid #F4F4F4;margin: 0 0.2rem;}
  .msg_remind span{text-align: right; font-size: 0.28rem;height: .7rem;font-weight:600;line-height: .4rem;float: left;width: .8rem;margin-top: .14rem;}
  .scrollDiv{height: 0.8rem;line-height: 0.6rem;overflow:hidden;float: right;width: 6rem;margin: 0.1rem;margin-top: 0.14rem;}
  .scrollDiv ul{display: inline-block;height: 100%;width: 100%;}
  .scrollDiv ul li{height: 0.4rem;padding-left: 0.1rem;font-size: 0.20rem;float: left;line-height: .4rem;overflow: hidden;}
  .scrollDiv ul li a{color: #666666;height: 0.4rem;font-size:0.24rem;}

  .hot_content{background: #fff;padding-bottom: 0.2rem;margin-top: 0.2rem;}
  .hot_content .title{height: 1rem;}
  .hot_content .title h3{position: relative;width: 2rem;height: 0.6rem;margin-top: 0.2rem;padding-left: 0.28rem;line-height: 0.6rem;color: #fff;border-radius: 0 .5rem .5rem 0;font-size: 0.26rem;float: left;background-image: -webkit-gradient(linear,right top,left top,from(#ffb924),to(#ffd953));background-image: linear-gradient(-90deg,#ffb924,#ffd953);}
  .hot_content .title a{float: right;padding-right: 0.2rem;font-size: 0.24rem;font-weight: 300;color: #8f96a0;height: 1rem;line-height:1rem;}
  .hot_content ul{padding:0 0.2rem;display: inline-block;}
  .hot_content li{float: left;}
  .hot_content li.operate_item1{width: 3rem;height: 3.4rem;}
  .hot_content li.operate_item1 a .operate_pic img{width: 100%;}
  .hot_content li.operate_item1 a .operate_text{width: 100%;margin-top: 0.2rem;}
  .hot_content li.operate_item1 a .operate_text p{font-size: 0.28rem;color: #666;padding-left: 0.2rem;}
  .hot_content li.operate_item1 a .operate_text span{font-size: 0.24rem;color: #999;padding-left: 0.2rem;display: inline-block;width: 100%;margin-top: 0.1rem;}
  .hot_content li.operate_item1 a .operate_text i{float: left;height: 0.3rem;line-height: 0.3rem;font-size: 0.26rem;color: #FA2F5D;margin: 0.1rem 0 0 0.2rem;}
  .hot_content li.operate_item2{height: 1.68rem;width: 4.1rem;}
  .hot_content li.operate_item2 a .operate_pic img{width: 2rem;float: right;}
  .hot_content li.operate_item2 a .operate_text{float: left;width: 2rem;}
  .new_content .title h3{background-image: -webkit-gradient(linear,right top,left top,from(#fb7414),to(#ff8029));background-image: linear-gradient(-90deg,#fb7414,#ff8029);}
  .new_content li.operate_item1{width: 2.36rem;}
  .new_content .title h3{background-image: -webkit-gradient(linear,right top,left top,from(#fb7414),to(#ff8029));background-image: linear-gradient(-90deg,#fb7414,#ff8029);}
  .new_content li.operate_item1{width: 2.36rem;}
  .global_content{margin-bottom: 2rem;}
  .global_content .title h3{background-image: -webkit-gradient(linear,right top,left top,from(#05d2a4),to(#16e1b6));background-image: linear-gradient(-90deg,#05d2a4,#16e1b6);}
  .zbox #head_top{background: none;}
</style>
